<template>
  <div class="personalDetails" id="nav-bar">
    <van-nav-bar title="个人信息" left-arrow @click-left="$router.go(-1)" />
    <div class="message">
      <van-cell title="姓名" :value="userInfo.name" />
      <van-cell title="学号" :value="userInfo.userId" />
      <div class="grade">
        <van-cell title="年级" :value="userInfo.grade" />
        <van-cell title="学院" :value="userInfo.college" />
        <van-cell title="专业" :value="userInfo.profession" />
      </div>
    </div>
    <div class="reminder">
      <div class="reminder_bg">
        <p class="ts_title">
          <img src="../../assets/images/pageList/3.1ts.png" alt="" />
          温馨提示
        </p>
        <p class="details">
          当个人信息有变动时，请点击“刷新信息”，即可查看您最新的个人信息。
        </p>
      </div>
    </div>
    <div class="btns">
      <div class="btnColor btn" @click="logout">退出登录</div>
      <div class="btnBlue btn" @click="upDateClick">刷新信息</div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      dataList: [],
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  methods: {
    // 退出登录
    logout() {
      this.$dialog
        .confirm({
          title: "提示",
          message: "您确定要退出登录吗?",
        })
        .then(() => {
          this.$store.dispatch(`user/${this.$types.LOGOUT}`);
          this.$router.push("/login");
        })
        .catch((error) => {
          console.log(error);
        });
    },
    upDateClick() {
      this.$toast.loading({
        message: "更新中...",
      });
      this.$http({
        url: "/private-xm/User/update",
        method: "post",
      })
        .then((res) => {
          this.$toast.clear();
          this.$store.dispatch(`user/${this.$types.LOGIN_AFTER}`, res);
          this.$toast("更新成功");
        })
        .catch((error) => {
          this.$toast.clear();
          this.$toast(error);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/variable";
#nav-bar ::v-deep .van-nav-bar__title {
  font-size: 0.506667rem /* 19/37.5 */;
}
.personalDetails {
  .van-nav-bar {
    background: none;
    margin-bottom: 0.4rem /* 15/37.5 */;
  }
  .van-nav-bar__title {
    font-weight: 600;
    color: #fff;
  }
  .van-nav-bar .van-icon {
    color: #111;
  }
  .van-hairline--bottom::after {
    border-bottom-width: 0;
  }
  .message {
    padding: 0.266667rem /* 10/37.5 */;
    .van-cell {
      font-size: 0.426667rem + $fontsize /* 16/37.5 */;
    }
    .grade {
      margin-top: 0.933333rem /* 35/37.5 */;
    }
  }
  .reminder {
    font-size: 0.48rem /* 18/37.5 */;
    width: 9.36rem /* 351/37.5 */;
    height: 4.44rem /* 166.5/37.5 */;
    margin: .666667rem /* 25/37.5 */ 0;
    box-shadow: 0px 1px 6px 0px rgba(35, 24, 21, 0.11);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0);
    .reminder_bg {
      border-radius: 0.133333rem /* 5/37.5 */;
      width: 8.746667rem /* 328/37.5 */;
      height: 3.2rem /* 120/37.5 */;
      background-color: #f4f4f4;
      .ts_title {
        font-weight: 600;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: .133333rem /* 5/37.5 */;
        img {
          width: 0.48rem /* 18/37.5 */;
          height: 0.48rem /* 18/37.5 */;
          margin-right: 0.133333rem /* 5/37.5 */;
        }
      }
      .details {
        font-size: .426667rem /* 16/37.5 */;
        color: #999;
        line-height: .64rem /* 24/37.5 */;
        margin: .266667rem /* 10/37.5 */ .533333rem /* 20/37.5 */;
      }
    }
  }
}
</style>
